/**
* 登录路由组件
*/
import React, { Component } from 'react'
import {
  NavBar,
  WingBlank,
  List,
  InputItem,
  WhiteSpace,
  Button,
  Toast
} from 'antd-mobile'
import Logo from '../../components/logo/logo'

import {connect} from 'react-redux'
import {login} from '../../redux/actions'

class Login extends Component {
  state = {
    username: '',   //用户名
    password: '',   //密码
  }
  toLogin = async () => {
    await this.props.login(this.state)
    const {msg, redirectTo} = this.props.user
    if (msg) {
      Toast.info(msg)
    }
    if (redirectTo) {
      this.props.history.replace(redirectTo)
      Toast.info('欢迎回来~')
    }
    


  }
  toRegister=()=>{
    this.props.history.replace('/register')
  }

  render() {
    return (
      <div>
        <NavBar type="primary">格&nbsp;雷&nbsp;招&nbsp;聘</NavBar>
        <div className="d-flex flex-colum jc-around" style={{height:'600px'}}>
          <Logo></Logo>
          <WingBlank>
            <List>
              <WhiteSpace />
              <InputItem onChange={val=> this.setState({username: val})} placeholder='请输入用户名'>用户名：</InputItem>
              <InputItem onChange={val=> this.setState({password: val})} type='password' placeholder='请输入密码'>密&nbsp;&nbsp;&nbsp;码：</InputItem>
              <WhiteSpace />
              <Button type="primary" onClick={this.toLogin}>登&nbsp;&nbsp;&nbsp;录</Button>
              <Button onClick={this.toRegister}>还未注册</Button>
            </List>
          </WingBlank>
        </div>
      </div>
    )
  }
}
export default connect(
  state => ({user: state.user}),
  {login}
)(Login)